<template>
  <div >
    <Search/>
    <div class="w status-wrap">
      <h2 class="status-title">{{$t('订单状态')}}</h2>
      <Steps :current="1" class="status-step">
        <Step v-for="(item,i) in steps" :key="`step-${i}`" :title="item.status" :content="item.desc"></Step>
    </Steps>
    </div>

    <div class="w receive-wrap">
      <h2 class="receive-title">{{$t('收货地址')}}</h2>
      <div class="receive-detail">
          <span class="left-name">
            {{$t('收货人')}}
          </span>
          <span class="">{{orderInfo.contacts}}</span>
      </div>
      <div class="receive-detail">
          <span class="left-name">
           {{$t('联系电话')}}
          </span>
          <span class="">{{orderInfo.telephone}}</span>
      </div>

      <div class="receive-detail">
          <span class="left-name">
            {{$t('收货地址')}}
          </span>
          <span class="">{{`${orderInfo.province}-${orderInfo.city}-${orderInfo.area}`}}</span>
      </div>
    </div>

    <div class="w order-info">
      <div>
        <div class="order-header">
        <h2 class="order-title">
          {{orderInfo.shop_name}}
        </h2>
        <div>
          <span>{{$t('联系客服')}}</span>
          <Icon type="md-headset" color="#e2231a" />
        </div>
      </div>
      <OrderDetailItem v-for="(item,i) in  orderInfo.goodsinfo" :key="`order-${i}`" :orderItem="item"></OrderDetailItem>

      <div class="orderinfo-item">
        <span class="orderinfo-item-name">{{$t('订单号')}}:</span>
        <span>{{orderInfo.ordernumber}}</span>
      </div>
      <div class="orderinfo-item">
        <span class="orderinfo-item-name">{{$t('运费')}}:</span>
        <span>{{+orderInfo.freight?`¥${orderInfo.freight}`:$t('免邮')}}</span>
      </div>
      <div class="orderinfo-item">
        <span class="orderinfo-item-name">{{$t('优惠')}}:</span>
        <span>{{orderInfo.youhui_price}}</span>
      </div>
    </div>


    </div>
    <div class="w order-total">
      <p>
        {{$t('总计')}}一{{$t('件商品')}}，{{$t('订单金额')}}：<span>{{`¥${orderInfo.total_price}`}}</span>
      </p>
      <div>
        <Button size="large" class="submitBtn submitBtn-cancel">{{$t('取消订单')}}</Button>
        <Button size="large" type="error" class="submitBtn submitBtn-now">{{$t('付款')}}</Button>
      </div>
    </div>
  </div>
</template>

<script>
  import { Search} from "@/components";
  import OrderDetailItem from './OrderDetailItem'
export default {
  name:'OrderDetail',
  components:{
    Search,
    OrderDetailItem
  },
  data(){
    return {
      steps:[
        {
          status:"待付款",
          desc:'待付款',
          id:0
        },   {
          status:"待发货",
          desc:'待发货',
          id:1
        },   {
          status:"待收货",
          desc:'待收货',
          id:2
        },   {
          status:"待评价",
          desc:'待评价',
          id:3
        },   {
          status:"已完成",
          desc:'已完成',
          id:4
        },
      ],
      orderInfo:{}
    }
  },
  created(){
    const {order_num} = this.$route.query || {}
    this.getMyorderinfo(order_num)
  },
  methods: {
    async getMyorderinfo(order_num){
      console.log({order_num});
      const {status,data} = await this.$http.getMyorderinfo({order_num})
      if(status===200){
        this.orderInfo = data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/common/style/common.scss";
.status{
  &-wrap{
    background-color: #fff;
    padding:20px ;
    margin-top: 20px;

  }
  &-title{
      padding:15px;
      font-size:20px;
      font-weight: 500;
    }
    &-step{
      padding:15px;
    }
}


.receive{
  &-wrap{
    background-color: #fff;
    margin-top: 20px;
    padding:10px 20px
  }
  &-title{
    padding:20px;
    font-weight: 600;
    font-size: 20px;
    border-bottom: 1px solid #eee;
  }
  &-detail{
    padding:8px 20px;
    font-size: 16px;
  }
}
.order{
  &-info{
    background-color: #fff;
    padding:20px;
    margin-top: 20px;
    font-weight: 500;
  }
  &-title{
    font-size: 18px;
    font-weight: 600;
  }
  &-header{
  padding:0 20px;
  @include flex($jc:space-between);

}
&-total{
  @include flex($jc:space-between);
  background-color: #fff;
  padding:14px 30px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  .submitBtn{
    position: absolute;
    right: 0;
    top:0;
    height:53px;
    padding:0 30px;
    border-radius: 0;
    &-cancel{
      margin-right: 120px;
      border: none;
    }
  }

}
}


.left-name{
    width:80px;
    display: inline-block;
  }
  .orderinfo-item{
    font-size: 14px;
    margin:0 20px;
    padding:10px 0;
    border-bottom: 1px dashed #eee;
    &-name{
      width:90px;
      display: inline-block;
    }
  }
/deep/ .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner{
  border-color: #e2231a;
    background-color: #e2231a;
}
/deep/ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner{
  border-color: #e2231a;
}
/deep/ .ivu-steps-item.ivu-steps-status-finish .ivu-steps-tail>i:after{
  background-color: #e2231a;
}
</style>
